<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="top-bar">
		<view class="title-box">
			<view><image class="back-icon" src="/static/jiantou2_1.png"></image></view>
			<view class="title">店铺商品(下沙店)</view>
			<view></view>
		</view>

      <view class="search-box">
		  <image class="search-icon" src="/static/ri_search-line.png"></image>
        <input type="text" placeholder="请输入商品" placeholder-style="color: #999999;"/>
        <image class="search-icon" src="/static/paizhao_1.png"></image>
      </view>
    </view>

    <!-- 分类和商品区域 -->
    <view class="content-container">
      <!-- 左侧分类导航 -->
      <view class="category-list">
        <view class="category-item active">所有商品</view>
        <view class="category-item">酒水饮料</view>
        <view class="category-item">小吃</view>
        <view class="category-item">饮料</view>
        <view class="category-item">果品</view>
        <view class="category-item">代买</view>
        <view class="category-item">茶水</view>
        <view class="category-item">雪糕</view>
        <view class="category-item">器材</view>
        <view class="category-item">槟榔</view>
        <view class="category-item">其他</view>
      </view>

      <!-- 右侧商品列表 -->
      <view class="product-list">
        <view class="product-title">所有商品</view>
        <view class="products-grid">
          <view class="product-item" v-for="(product, index) in products" :key="index" @click="taburl()">
            
			<view><image class="product-image" :src="product.image" mode="aspectFill"></image></view>
            
            <view class="product-infos">
			<view class="product-name">{{ product.name }}</view>
              <text class="product-stock">库存：<text> {{ product.stock }}盘</text></text>
              <text class="product-price">单价：<text>¥{{ product.price }}</text></text>
            </view>
           <view class="product-tags">
              <text class="tag" v-for="(tag, tagIndex) in product.tags" :key="tagIndex">{{ tag }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部添加按钮 -->
   <view class="add-button-container">
      <image class="add-icon" src="/static/tianjia_2.png" :click="nacurl()"></image>
    </view>

    <!-- 自定义tabbar -->
    <view class="custom-tabbar">
      <view class="tabbar-item" v-for="(item, index) in tabbarItems" :key="index" :class="{active: currentTab === index}">
        <image class="tabbar-icon" :src="currentTab === index ? item.selectedIcon : item.icon"></image>
        <text class="tabbar-text">{{ item.text }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      products: [
        {
          name: "两营特盘",
          image: "/static/Group_427319262.png",
          stock: 20,
          price: 28.00,
          tags: ["新", "热"]
        },
        {
          name: "饮料",
          image: "/static/Group_427319263.png",
          stock: 20,
          price: 28.00,
          tags: ["新", "热"]
        },
        {
          name: "啤酒",
          image: "/static/Group_427319261.png",
          stock: 20,
          price: 28.00,
          tags: ["新", "热"]
        },
        {
          name: "薯片",
          image: "/static/Group_427319269.png",
          stock: 20,
          price: 28.00,
          tags: ["新", "热"]
        },
        {
          name: "鸡尾酒",
          image: "/static/Group_427319270.png",
          stock: 20,
          price: 28.00,
          tags: ["新", "热"]
        },
        {
          name: "可乐",
          image: "/static/Group_427319272.png",
          stock: 20,
          price: 28.00,
          tags: ["新", "热"]
        },
        {
          name: "鸡尾酒",
          image: "/static/Group_427319270.png",
          stock: 20,
          price: 28.00,
          tags: ["新", "热"]
        },
        {
          name: "可乐",
          image: "/static/Group_427319272.png",
          stock: 20,
          price: 28.00,
          tags: ["新", "热"]
        }
      ],
      tabbarItems: [
        {
          icon: "/static/Group_427319157.png",
          selectedIcon: "/static/Group_427319158.png",
          text: "商品库"
        },
        {
          icon: "/static/Group_427319157.png",
          selectedIcon: "/static/Group_427319158.png",
          text: "更多"
        }
      ],
      currentTab: 2
    };
  },
  methods: {
    switchTab(index) {
      this.currentTab = index;
      // 这里可以添加页面切换逻辑
    },
	taburl(){
		uni.navigateTo({
			url: '/pages/cartindex/compontends/cartdeil',

		});
	},
	nacurl(){
		uni.navigateTo({
			url:'/pages/cartindex/compontends/createaproduct',
		})
	}
  }
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
  background-image: url('/static/Group_427319214.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.top-bar {
  display: flex;
  flex-direction: column;
  padding: 40rpx 30rpx 20rpx;
  // background-color: #ffffff;
  // box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

.title-box{
	width: 100%;
 display: flex;
 justify-content: space-between;
	.back-icon {
	  width: 40rpx;
	  height: 40rpx;
	  margin-bottom: 20rpx;
	}
	
	.title {
	  font-size: 36rpx;
	  font-weight: bold;
	  color: #333333;
	  margin-bottom: 20rpx;
	}
}


  .search-box {
	  box-sizing: border-box;
    display: flex;
    align-items: center;
    height: 70rpx;
    background-color: #f5f5f5;
    border-radius: 35rpx;
    padding: 0 30rpx;
width: 710rpx;
height: 72rpx;
    input {
		margin-left: 16rpx;
      flex: 1;
      font-size: 28rpx;
      color: #333333;
    }

    .search-icon {
      width: 40rpx;
      height: 40rpx;
    }
  }
}

.content-container {
  display: flex;
  flex: 1;
  overflow: hidden;

  .category-list {
	  box-sizing: border-box;
    width: 176rpx;
 background: rgba(255,255,255,0);
    overflow-y: auto;
    // padding: 20rpx 0;

    .category-item {
      height: 106rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      color: #666666;
      border-left: 6rpx solid transparent;

      &.active {
        color: #1EBE76;
        border-left-color: #1EBE76;
        background-color:#fff;
      }
    }
  }

  .product-list {
	  box-sizing: border-box;
    flex: 1;
    overflow-y: auto;
    // padding: 20rpx;
	margin-left: 32rpx;
	height: 100%;
 //    width: 574rpx;
	// height: 1000rpx;
	// overflow: hidden;
    .product-title {
		margin-top: 28rpx;
      font-size: 28rpx;
      font-weight: bold;
      color: #333333;
      margin-bottom: 36rpx;
    }

    .products-grid {
     

      .product-item {
		  position: relative;
           margin:  0 32rpx 32rpx 0;
        // border-radius: 16rpx;


        // padding: 20rpx;
display: flex;
        .product-image {
			background-color: red;
          width: 150rpx;
          height: 150rpx;
          border-radius: 10rpx;
          // margin-bottom: 15rpx;
        }



        .product-infos {
			margin-left: 20rpx;
			box-sizing: border-box;
          display: flex;
         flex-direction: column;
          // margin-bottom: 10rpx;
		  // box-sizing: border-box;
        .product-name {
          font-size: 28rpx;
          color: #333333;
          margin-bottom: 14rpx;
		  font-weight: bold;
          // display: -webkit-box;
          // -webkit-line-clamp: 1;
          // -webkit-box-orient: vertical;
          // overflow: hidden;
        }
          .product-stock {
			  
            font-size: 24rpx;
            color: #999999;
			text{
				color: #2D3046;
			}
          }

          .product-price {
            font-size: 24rpx;
			margin-top: 26rpx;
            color: #999999;
            // font-weight: bold;
			text{
				color: #1EBE76;
			}
          }
        }

        .product-tags {
			position: absolute;
			top: 20rpx;
			right:20rpx;
          display: flex;
          // gap: 10rpx;
               box-sizing: border-box;
          .tag {
			  width: 32rpx;
			  margin-left: 18rpx;
			  text-align: center;
			  line-height: 32rpx;
			  height: 32rpx;
            font-size: 20rpx;
            color: #fff;
            background-color:#FF7D12;
         
            border-radius: 12rpx;
          }
		  .tag:first-child {
		    color: #fff; /* 文字颜色 */
		    background-color: #1EBE76; /* 背景色 */
		  
		  }
        }
      }
    }
  }
}

.add-button-container {
  position: fixed;
  bottom:50rpx;
  right: 300rpx;
  width: 120rpx;
  height: 120rpx;
  background-color: #1EBE76;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 20rpx rgba(30, 190, 118, 0.3);
z-index: 99;
  .add-icon {
    width: 60rpx;
    height: 60rpx;
    color: #ffffff;
  }
}

.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background-color: #ffffff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

  .tabbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .tabbar-icon {
      width: 60rpx;
      height: 60rpx;
      margin-bottom: 10rpx;
    }

    .tabbar-text {
      font-size: 24rpx;
      color: #8E949B;
    }

    &.active {
      .tabbar-text {
        color: #2D3046;
      }
    }
  }
}
</style>